import 'package:flutter/material.dart';
import './constants.dart' show AppColors, AppStyles, Constants;
import '../modal/conversation.dart' show Conversation, mockConversations , Device;

class _ConversationItem extends StatelessWidget {
  const _ConversationItem({Key key, this.conversation})
      : assert(conversation != null),
        super(key: key);

  final Conversation conversation;

  @override
  Widget build(BuildContext context) {
    // 根据图片的获取方式初始化头像组件
    Widget avatar;
    if (conversation.isAvatarFromNet()) {
      avatar = Image.network(
        conversation.avatar,
        width: Constants.CnversationAvatarSize,
        height: Constants.CnversationAvatarSize,
      );
    } else {
      avatar = Image.asset(
        conversation.avatar,
        width: Constants.CnversationAvatarSize,
        height: Constants.CnversationAvatarSize,
      );
    }

    /**
     * 根据未读消息数量判断是否需要红点提示
     */
    var _desInfo = ''; // 细化des 显示未读条数
    Widget avatarContainer;
    if (conversation.unreadMsgCount > 0) {
      _desInfo = '[' +
          conversation.unreadMsgCount.toString() +
          '条] ' +
          conversation.des;

      /**
       * 未读消息部件：
       */
      Widget unreadMsgCountText = Container(
        width: Constants.UnReadMsgNotifyDotSize,
        height: Constants.UnReadMsgNotifyDotSize,
        alignment: Alignment.center,
        decoration: BoxDecoration(
            //画圆
            borderRadius:
                BorderRadius.circular(Constants.UnReadMsgNotifyDotSize / 2.0),
            color: Color(AppColors.NotifyDotBg)),
        child: Text(
          conversation.unreadMsgCount.toString(),
          style: AppStyles.UnreadMsgCountDotStyle,
        ),
      );

      /**
       * 头像容器：包含头像与未读消息红点
       */
      avatarContainer = Stack(
        overflow: Overflow.visible, // 表示超出部分不切割显示
        children: <Widget>[
          avatar,
          Positioned(
            // 定位
            child: unreadMsgCountText, //需要定位的元素
            right: -6.0, // 偏移量
            top: -6.0, // 偏移量
          )
        ],
      );
    } else {
      _desInfo = conversation.des;
      avatarContainer = avatar;
    }

    // 勿扰模式图标
    var _rightArea = <Widget>[
      Text(conversation.updateAt, style: AppStyles.DesStyle),
      SizedBox(height: 10.0),
    ];
    if (conversation.isMute) {
      _rightArea.add(Icon(
          IconData(
            0xe74c,
            fontFamily: Constants.IconFontFamily,
          ),
          color: Color(AppColors.ConversationMuteIcon),
          size: Constants.ConversationMuteIconSize));
    } else {
      _rightArea.add(Icon(
          IconData(
            0xe74c,
            fontFamily: Constants.IconFontFamily,
          ),
          color: Colors.transparent,
          size: Constants.ConversationMuteIconSize));
    }

    return Container(
      padding: const EdgeInsets.all(10.0), //外边距
      // 装饰器
      decoration: BoxDecoration(
          color: Color(AppColors.ConversationItemBg),
          border: Border(
              bottom: BorderSide(
                  color: Color(AppColors.DividerColor),
                  width: Constants.DividerWidth))),
      child: Row(
        // 行布局
        crossAxisAlignment: CrossAxisAlignment.center, // 行方向交叉轴（也就是y轴）， 居中显示
        children: <Widget>[
          // 行中的子容器
          // Image.asset(
          //   'assets/images/default_nor_avatar.png',
          //   width: Constants.CnversationAvatarSize,
          //   height: Constants.CnversationAvatarSize,
          // ),
          avatarContainer,
          Container(
            width: 10,
          ),
          Expanded(
            // 自动扩充容器，自动填满剩余的空间
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget>[
                Text(
                  conversation.title,
                  style: AppStyles.TitleStyle,
                ),
                Text(
                  _desInfo,
                  style: AppStyles.DesStyle,
                )
              ],
            ),
          ),
          Container(
            width: 10.0,
          ),
          Column(
            children: _rightArea,
          )
        ],
      ),
    );
  }
}

/**
 * 其他端登陆显示信息栏
 */
class _DeviceInfoItem extends StatelessWidget {

  //构造方法，默认为mac
  _DeviceInfoItem({this.device: Device.MAC}):assert(device != null);

  final Device device;

  // 根据登陆设备选中 icon
  int get iconName {
    return this.device == Device.WIN ? 0xe7c4:0xe60d;
  }
  // 根据登陆设备选择 设备名
  String get deviceName {
    return device == Device.WIN ? 'Windows' : 'Mac';
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      // 边距
      padding:
          EdgeInsets.only(left: 24.0, top: 10.0, right: 24.0, bottom: 10.0),
      // 装饰器 
      decoration: BoxDecoration(
          border: Border(
              bottom: BorderSide(
                  width: Constants.DividerWidth,
                  color: Color(AppColors.DividerColor))),
          color: Color(AppColors.DeviceInfoItemBg)),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.start,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: <Widget>[
          Icon(IconData(iconName, fontFamily: Constants.IconFontFamily),
              size: 24.0, color: Color(AppColors.DeviceInfoItemIcon)),
          SizedBox(
            width: 16.0,
          ),
          Text(
            '$deviceName 微信已登录，手机通知已关闭。',
            style: AppStyles.DeviceInfoItemTextStyle,
          )
        ],
      ),
    );
  }
}

class ConversationPage extends StatefulWidget {
  @override
  _ConversationPageState createState() => _ConversationPageState();
}

class _ConversationPageState extends State<ConversationPage> {
  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      itemBuilder: (BuildContext context, int index) {
        if (index == 0) {
          return _DeviceInfoItem(device:Device.MAC);
        }
        return _ConversationItem(
          conversation: mockConversations[index - 1],
        );
      },
      itemCount: mockConversations.length + 1,
    );
  }
}
